html,
body {
	width: 100%;
	height: 100%;
	min-width: 1000px;
	min-height: 500px;
	color: #000;
}

/*背景*/
.W-sider-zhe {
	width: 100%;
	height: 100%;
	position: absolute;
	left:0;
	top:0;
	background-color: rgba(86, 83, 100, 0.5);
}

.W-aboutme {
	background: url("../img/W-bg2.jpg") no-repeat;
	background-size: cover;
}

.W-aboutme, .W-sider-zhe {
	background-color: rgba(86, 83, 100, .7);
}
/*技能掌握*/

.W-skill {
	background: url("../img/W-bg7.jpg") no-repeat;
	background-size: cover;
}

.W-skill, .W-sider-zhe {
	background-color: rgba(86, 83, 100, .7);
}

/*经历*/
.W-work {
	background: url("../img/W-bg3.jpg") no-repeat;
	background-size: cover;
}

.W-work .W-sider-zhe {
	background-color: rgba(86, 83, 100, .7);
}

/*z作品*/
.W-mywork {
	background: url("../img/W-bg4.jpg") no-repeat;
	background-size: cover;
}

.W-mywork .W-sider-zhe {
	background-color: rgba(86, 83, 100, .7);
}

/*联系我*/
.W-contact-me {
	background: url("../img/W-bg1.jpg") no-repeat;
	background-size: cover;
}
.W-contact-me .W-sider-zhe {
	background-color: rgba(86, 83, 100, .7);
}



















.fadeInLeft {
  -webkit-animation: fadeInLeft 1.2s ease-in;
  animation: fadeInLeft 1.2s ease-in;
  -o-animation: fadeInLeft 1.2s ease-in;
  -moz-animation: fadeInLeft 1.2s ease-in;
  -ms-animation: fadeInLeft 1.2s ease-in;
}

/*swiper*/
.swiper-container1 {
	width: 100%;
	height: 100%;
}

.swiper-container1 .swiper-wrapper1 {
	width: 100%;
	height: 100%;
}

.swiper-slide1,.W-aboutme,.W-skill,.W-work,.W-mywork,.W-contact-me {
	position: relative;
	width: 100%;
	height: 100%;
}

.w-mask {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(218, 218, 234, 0.35); 
	z-index: 502;
}

.W-head-portrait {
	width: 280px;
	height: 60px;
	position: fixed;
	z-index: 200;
	left: 2.5%;
	top: 4%;
	cursor: pointer;
	border: 1px solid #ccc;
	background: rgba(255,255,255,.4);
	border-radius: 10px;
}

.W-head-portrait img {
	margin-left: 4%;
	width: 60px;
	height: 100%;
	border-radius: 50%;
	float: left;
	border: 1px solid #ccc;
}

.My-resume {
	margin-left: 20px;
	font-size: 18px;
	float: left;
	height: 100%;
	line-height: 60px;
	color: #000;
	font-weight: 800;
}

.My-resume i {
	font-size: 18px;
	font-weight: 500;
	padding-left: 5px;
}

.My-resume span {
	display: inline-block;
	color: white;
	height: 30px;
	margin-top: 15px;
	line-height: 30px;
	text-align: center;
	width: 74px;
	background: #000;
	border-radius: 4px;
}

.My-resume:hover i {
	color: #337ab7;
}

.My-resume:hover {
	color: #337ab7;
}

/*右侧的导航按钮*/



.nav-open .nav-toggle {
  box-shadow: none;
}

.nav-open .nav-toggle .icon {
  width: 0px;
}
.nav-open .nav-toggle .icon:before {
  -webkit-transform: translateY(9px) rotate(45deg);
      -ms-transform: translateY(9px) rotate(45deg);
       -o-transform: translateY(9px) rotate(45deg);
     -moz-transform: translateY(9px) rotate(45deg);
          transform: translateY(9px) rotate(45deg);
}
.nav-open .nav-toggle .icon:after {
  -webkit-transform: translateY(-9px) rotate(-45deg);
      -ms-transform: translateY(-9px) rotate(-45deg);
          transform: translateY(-9px) rotate(-45deg);
       -o-transform: translateY(-9px) rotate(-45deg);
     -moz-transform: translateY(-9px) rotate(-45deg);
}

.nav-toggle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  position:absolute;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
  -webkit-transition-duration: 0.66s;
          transition-duration: 0.66s;
       -o-transition-duration: 0.66s;
     -moz-transition-duration: 0.66s;
      -ms-transition-duration: 0.66s;
  -webkit-transition-timing-function: swing;
          transition-timing-function: swing;
       -o-transition-timing-function: swing;
     -moz-transition-timing-function: swing;
      -ms-transition-timing-function: swing;
}
.nav-toggle:before {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: transparent;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
       -o-transform: translateX(-50%) translateY(-50%);
     -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transition-duration: 0.66s;
          transition-duration: 0.66s;
       -o-transition-duration: 0.66s;
     -moz-transition-duration: 0.66s;
      -ms-transition-duration: 0.66s;
  -webkit-transition-timing-function: swing;
          transition-timing-function: swing;
       -o-transition-timing-function: swing;
     -moz-transition-timing-function: swing;
      -ms-transition-timing-function: swing;
}

.nav-toggle:hover {
	background: #337ab7;
}

.nav-toggle .icon {
  width: 30px;
  height: 4px;
  background-color: white;
  border-radius: 2px;
  position: absolute;
  top: 28px;
  left: 15px;
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
       -o-transition-duration: 0.5s;
     -moz-transition-duration: 0.5s;
      -ms-transition-duration: 0.5s;
          transiting-timing-function: swing;
  -webkit-transiting-timing-function: swing;
       -o-transiting-timing-function: swing;
     -moz-transiting-timing-function: swing;
      -ms-transiting-timing-function: swing;
}
.nav-toggle .icon:before,
.nav-toggle .icon:after {
  width: 30px;
  height: 4px;
  background-color: white;
  border-radius: 2px;
  content: "";
  position: absolute;
  left: 0;
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
       -o-transition-duration: 0.5s;
     -moz-transition-duration: 0.5s;
      -ms-transition-duration: 0.5s;
  -webkit-transition-timing-function: swing;
          transition-timing-function: swing;
          -o-transition-timing-function: swing;
      -moz-transition-timing-function: swing;
       -ms-transition-timing-function: swing;
}
.nav-toggle .icon:before {
  top: -9px;
}
.nav-toggle .icon:after {
  top: 9px;
}

.nav-yuan {
	position: fixed;
    right: 2%;
    top: 4%;
    z-index: 6666;
    width: 60px;
}

.talkbubble {
	display: none;
	width: 60px;
	height: 30px;
	background: #337ab7;
	position: absolute;
	top: 73px;
	right: 0;
	   -moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	        border-radius: 5px;
	text-align: center;
	line-height: 30px;
	color: #fff;
	font-size: 12px;
}

.talkbubble:before {
	content: "";
	position: absolute;
	right: 22px;
	top: -8px;
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-bottom: 8px solid #337ab7;
	border-right: 8px solid transparent;
}

.navigation {
	background: transparent;
	position: fixed;
	z-index: 444;
	right: -35%;
	top: 0;
	width: 30%; 
	height: 0;
    border-top: none;
    border-bottom: #e4e2e3 solid;
    border-left: transparent 180px solid;
    border-right: none;
    box-sizing: border-box;
}

.nav-zhe {
	background:rgba(0,0,0,.85);
	position: fixed;
	left: 0;
	top:0;
	z-index: 300;
	width: 100%;
	height: 100%;
	display: none;
}

.navigation ul {
	position: fixed;
	top: 50%;
	display: block;
	right: -150px;
	height: 406px;
	margin-top: -210px;
}

.navigation ul li a {
	font-size: 20px;
	position: relative;
	font-family: "微软雅黑";
	color: #686967;
	padding: 10% 30px;
	display: inline-block;
	-webkit-transition: color .4s ease-in;
	     -o-transition: color .4s ease-in;
	   -moz-transition: color .4s ease-in;
	    -ms-transition: color .4s ease-in;
	        transition: color .4s ease-in;
	moz-user-select: -moz-none;
	-moz-user-select: none;
	-o-user-select:none;
	-khtml-user-select:none;
	-webkit-user-select:none;
	-ms-user-select:none;
	user-select:none;
}

.navigation ul li .a-active {
	color: #337ab7; 
}

.navigation ul li {
	text-align: right;
	white-space: nowrap;
}

.navigation ul li a span {
	width: 0;
	height: 2px;
	background: #337ab7;
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -1px;
	margin: 0 auto;
	right: 0;
	bottom: 0;
}

.navigation ul li a .span-active {
	width: 100%;
}

.navigation ul li:hover a {
	color: #337ab7;
}


@font-face {
	font-family: myFirstFont;
	src: url(../font/SketchFineSerif.otf);
}

.W-logo {
	width: 283px;
	height: 50px;
	position: fixed;
	right: -80%;
	bottom: 30px;
	z-index: 444;
	margin-right: 30px;
	line-height: 50px;
	font-family: "微软雅黑";
	moz-user-select: -moz-none;
	-moz-user-select: none;
	-o-user-select:none;
	-khtml-user-select:none;
	-webkit-user-select:none;
	-ms-user-select:none;
	user-select:none;
}

.W-logo img {
	width: 52px;
	height: 50px;
	float: left;
}

.W-rem {
	float: left;
	font-size: 38px;
	font-weight: 100;
	color: #202020;
}

.W-logo-jian {
	float: left;
	position: relative;
}

.W-boke {
	color: #000;
	white-space: nowrap;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 116px;
	height: 24px;
	line-height: 24px;
	font-size: 14px;
	text-align: center;
}

.W-qq {
	color: #fff;
	text-align: center;
	background: #000;
	font-size: 15px;
	width: 116px;
	height: 22px;
	white-space: nowrap;
	position: absolute;
	left: 0px;
	top: 20px;
	line-height: 22px;
}

.W-zhan {
	float: right;
	font-size: 38px;
	font-weight: 100;
	color: #202020;
}



/*卡*/
.slider {
	position: relative;
	z-index: 101;
	width: 100%;
	height: 100%;
	/*min-width: 1200px;*/
}

.slider .items-group {
	width: 100%;
	height: 100%;
	position: relative;
}

.slider .items-group .item {
	top: 0px;
	left: 0px;
	opacity: 0;
	width: 100%;
	height: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	overflow: hidden;
	-webkit-transition: 0.5s;
	transition: 0.5s;
	visibility: hidden;
	position: relative;
	padding: 50px 20px;
	position: absolute;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	box-sizing: border-box;
}

.slider .items-group .item:hover .bg {
	opacity: 0.2;
}

.slider .items-group .item:hover .block {
	        box-shadow: 0px 0px 50px #333;
	     -o-box-shadow: 0px 0px 50px #333;
	-webkit-box-shadow: 0px 0px 50px #333;
	   -moz-box-shadow: 0px 0px 50px #333;
	    -ms-box-shadow: 0px 0px 50px #333;
}

.slider .items-group .item.active {
	opacity: 1;
	visibility: visible;
}

.slider .items-group .item .bg {
	top: 0px;
	left: 0px;
	opacity: 1;
	z-index: -1;
	width: 100%;
	height: 100%;
	-webkit-transition: 0.5s;
	transition: 0.5s;
	position: absolute;
	-webkit-transform: scale(1.03);
	transform: scale(1.03);
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

.slider .items-group .item .blur {
	top: 0px;
	left: 0px;
	z-index: -1;
	width: 100%;
	height: 100%;
	-webkit-transition: 0.5s;
	transition: 0.5s;
	-webkit-filter: blur(5px);
	filter: blur(5px);
	position: absolute;
	-webkit-transform: scale(1.03);
	transform: scale(1.03);
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

.slider .items-group .item .block {
	width: 700px;
	height: 280px;
	padding: 0;
	color: #000;
	-webkit-transition: box-shadow 0.5s;
	transition: box-shadow 0.5s;
	overflow: hidden;
	border-radius: 10px;
	-webkit-transform: scale(1.03);
	transform: scale(1.03);
	box-sizing: border-box;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	box-shadow: none;
}

.slider .items-group .item .block .circleLight {
	top: 0px;
	left: 0px;
	opacity: 0;
	content: '';
	width: 100%;
	height: 100%;
	display: block;
	-webkit-transition: 0.5s;
	transition: 0.5s;
	position: absolute;
	border-radius: 10px;
	background: -webkit-radial-gradient(80px 40px, circle, #ffffff, rgba(0, 0, 0, 0));
	background: radial-gradient(circle at 80px 40px, #ffffff, rgba(0, 0, 0, 0));
}

.slider .items-group .item .block .text {
	width: 100%;
	height: 100%;
	position: absolute;
	color: #000;
	left: 0;
	top: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	text-align: center;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	background-position: center;
	background-attachment: fixed;
}

.text strong {
	font-size: 25px;
	color: #000;
	moz-user-select: -moz-none;
	-moz-user-select: none;
	-o-user-select:none;
	-khtml-user-select:none;
	-webkit-user-select:none;
	-ms-user-select:none;
	user-select:none;
}

.slider .items-group .item .block h2 {
	text-align: center;
	font-family: myFirstFont, "微软雅黑", SimSun, "宋体", sans-serif;
	white-space: nowrap;
	font-size: 70px;
	color: #000;
	moz-user-select: -moz-none;
	-moz-user-select: none;
	-o-user-select:none;
	-khtml-user-select:none;
	-webkit-user-select:none;
	-ms-user-select:none;
	user-select:none;
}

.slider .items-group .item .block p {
	font-family: "微软雅黑";
	font-size: 20px;
	margin-top: 8px;
	color: #000;
	letter-spacing: 2px;
}

.slider .items-group .item .block .W-p1,
.slider .items-group .item .block .W-p2 {
	moz-user-select: -moz-none;
	-moz-user-select: none;
	-o-user-select:none;
	-khtml-user-select:none;
	-webkit-user-select:none;
	-ms-user-select:none;
	user-select:none;
}

.slider .items-group .item .block:hover {
	        box-shadow: 0px 0px 70px #111;
	     -o-box-shadow: 0px 0px 70px #111;
	-webkit-box-shadow: 0px 0px 70px #111;
	   -moz-box-shadow: 0px 0px 70px #111;
	    -ms-box-shadow: 0px 0px 70px #111;
}

.slider .items-group .item .block:hover .circleLight {
	opacity: 0.4;
}

.slider .items-group .item .block .W-mailbox {
	color: #7d2704;
}

.swiper-pagination1 {
	position: fixed;
	right: 2.7%!important;
	width: 14px;
	margin-top: -30px;
}

.swiper-pagination1:after {
	width: 6px;
	height: 230px;
	position: absolute;
	display: block;
	content: '';
	left: 0;
	border-right: 1px dashed #8c7576;
	top: 24px;
}

.swiper-pagination1 .swiper-pagination-bullet {
	width: 14px;
	height: 14px;
	background: #dddedc;
	margin: 24px auto!important;	
	opacity: 1;
	position: relative;
	z-index: 100;

}

.swiper-pagination1 .swiper-pagination-bullet:after {
	width: 6px;
	height:6px;
	content: '';
	border-radius:50%;
	background: #337ab7;
	display: block;
	position: absolute;
	left: 50%;
	margin-left: -3px;
	top: 50%;
	margin-top: -3px;
}

.swiper-pagination1 .swiper-pagination-bullet:hover {
	opacity: 1;
	background: #fff;
}

.swiper-pagination1 .swiper-pagination-bullet-active {
	animation: sploosh3 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
	-webkit-animation: sploosh3 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
	-o-animation: sploosh3 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
	-moz-animation: sploosh3 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
	-ms-animation: sploosh3 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
	-webkit-animation-iteration-count:infinite;
	animation-iteration-count:infinite;
	-o-animation-iteration-count:infinite;
	-moz-animation-iteration-count:infinite;
	-ms-animation-iteration-count:infinite;
	width: 14px;
	opacity: 1;
	height: 14px;
	background: #ddd;
}

.swiper-pagination1:before {
	content:'';
	background: url(../img/nn.jpg) no-repeat;
	background-size: 100% 100%;
	width: 40px;
	height: 40px;
	position: absolute;
	bottom: -35px;
	left: -13px;
	z-index: 100;
	display: block;
	border-radius: 100%;
	        animation:runs 15s infinite linear;
	     -o-animation:runs 15s infinite linear;
	-webkit-animation:runs 15s infinite linear;
	   -moz-animation:runs 15s infinite linear;
	    -ms-animation:runs 15s infinite linear;
	cursor: pointer;
}


.W-yyue {
	width: 40px;
	height: 40px;
	background: transparent;
	position: fixed;
	top: 50%;
	right: 2.7%;
	margin-top: 91px;
	margin-right: -13px;
	z-index: 222;
	border-radius: 50%;
	transition: background .3s ease-in;
	-o-transition: background .3s ease-in;
	-webkit-transition: background .3s ease-in;
	-moz-transition: background .3s ease-in;
	-ms-transition: background .3s ease-in;
	cursor: pointer;
}

.W-yyue:hover {
	background: #f2dfdf;
	opacity: .7;
}


.demoSpan1:before, .demoSpan1:after {
	content:''; 
	height:20px;
	width:4px; 
	display:block; 
	background:#333; 
	position:absolute; 
	top:10px; 
	left:14px;
}

.demoSpan1:after {
	left:22px;
}


.demoSpan2:before {
	content:''; 
	height:0; 
	width:0; 
	display:block; 
	border:10px transparent solid; 
	border-right-width:0; 
	border-left-color:#333; 
	position:absolute; 
	top:10px; 
	left:16px;
}

.W-yyue span {
	display: none;
}



/*关于我*/
.W-aboutme {
	/*background: url(../img/bg1.gif);*/
	/*position: relative;*/
}

.W-introduce {
	width: 1000px;
	position: absolute;
	left: 50%;
	margin-left: -500px;
	top: 50%;
	margin-top: -230px;
	overflow: hidden;
	height: 460px;

}

.W-introduce-me {
	max-width: 200px;
	height: 200px;
	margin: 20px auto 0 auto;
	border-radius: 50%;
	cursor: pointer;
	overflow: hidden;

}
.W-introduce-me img {
	width:200px;
	height: 200px;
	border-radius: 100%;
	object-fit: cover;
	object-position: top 0px center;
	filter:grayscale(1); 
	-o-filter:grayscale(1); 
	-moz-filter:grayscale(1); 
	-ms-filter:grayscale(1); 
}

.W-introduce-me:hover {
			box-shadow: 0px 0px 20px #337ab7;
	-webkit-box-shadow: 0px 0px 20px #337ab7;
	     -o-box-shadow: 0px 0px 20px #337ab7;
       -moz-box-shadow: 0px 0px 20px #337ab7;
	    -ms-box-shadow: 0px 0px 20px #337ab7;
}

.W-introduce p {
	max-width: 850px;
	margin: 20px auto 0 auto;
	font-size: 1.25rem;
	text-indent: 2.4rem;
	line-height: 30px;
	text-align: justify;
	color: #fff;
	font-weight: lighter;
}

.wantu {
	color: #d818c8;
	font-weight: 600;
}


.W-page2 {
	display: none;
}








/*技能掌握*/
.W-skill {
	/*background: url(../img/bg2.jpg) repeat;*/
}

#content {
	position:absolute;
	top:50%;
	left:50%;
	margin:-290px 0 0 -450px;
	width:900px;
	height:600px;
}

.legend {
	float:left;
	width:250px;
	margin-top:140px;
}

#content h1 {
	font-family:'Cabin Sketch', arial, serif;
	text-shadow:3px 3px 0 #ddd;
	color:#ffd200;
	font-size:40px;
	text-align:right;
	margin-right: 20px;
}

.skills {
	float:left;
	clear:both;
	width:100%;
}

.skills ul,
.skills li {
	display:block;
	list-style:none;
	margin:0;
	padding:0;
}

.skills li {
	float:right;
	clear:both;
	padding:0 15px;
	height:35px;
	line-height:35px;
	color:#fff;
	margin-bottom:1px;
	font-size:18px;
}

.skills .jq {
	background:#97BE0D;
}

.skills .css {
	background:#d7d8d8;
}

.skills .html {
	background:#d3d671;
}

.skills .Vue {
	background:rgba(112, 173, 32, 1);
}

.skills .sql {
	background:#e4a787;
}

#diagram {
	float:right;
	width:600px;
	height:600px;
}

.get {
	display:none;
}


/*工作经历*/
.W-work {
	/*background: url(../img/bg3.gif);*/
}

.W-work-nr {
	width: 820px;
	min-height:468px;
	overflow: hidden;
	padding-bottom: 1px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -210px 0 0 -410px;
}

.W-work-left {
	float: left;
}

.W-jing-nr {
	width: 200px;
	height: 93px;
}

.W-jing-nr-parent {
	width:93px;
	height: 93px;
	position: relative;
	float: right;
}

.W-jing-nr .W-time {
	width: 83px;
	height: 83px;
	font-size:30px;
	font-weight: bold;
	font-family: "微软雅黑";
	text-align: center;
	color: #6bc30d;
	position: absolute;
	left: 0;
	top: 0;
	border-radius: 50%;
	border: 5px solid #d7d8d8;
	cursor: pointer;
}
.W-jing-nr h5 {
	margin-left: 10px;
	margin-top: 36px;
	float: left;
	font-size: 18px;
	color: #ffd200;
}

.W-jing-nr .W-time i {
	font-size: 15px;
	color: #90af70;
	font-weight: bold;
	display: block;
	margin-top: -10px;
	text-transform: uppercase;
}

.W-time span {
	display: block;
	width: 100%;
	margin-top: 18px;
}

.W-zhuan {
	display:none;
	width: 83px;
	height: 83px;
	background: url(../img/clock.png) no-repeat #6bc30d;
	border-radius: 50%;
	border: 5px solid #c4e79e;
	background-position: center center;
	background-size: cover;
	position: absolute;
	left: -5px;
	top: -5px;
}

.W-tim-ul {
	position: relative;
	width: 150px;
	height: 360px;
	border-right: 8px solid #d7d8d8;
	padding-top: 20px;
	cursor: pointer;
}

.W-tim-ul li{
	height: 100px;
	line-height: 100px;
}

.W-tim-ul li em {
	font-size: 12px;
	font-style: normal;
	/*color: #2d1b0f;*/
	color: #e6de8d;
	margin-left: 30px;
}

.W-tim-ul li i {
	font-size: 18px;
	/*color:#2d1b0f;*/
	color: #e6de8d;
	margin-left: 8px;
}

.W-tim-ul li b {
	width: 25px;
	height: 2px;
	float: right;
	margin-top: 49px;
	/*background: #586b3e;*/
	background: #6bc30d;
}

.W-tim-ul li span {
	border: 2px solid #a6db6d;
	height: 16px;
	width: 16px;
	border-radius: 50%;
	background: #fff;
	display: block;
	position: absolute;
	right: -14px;
	top: 63px;
	cursor: pointer;
	z-index: 111;
}

.W-tim-ul .W-margin-top1 {
	margin-top: 25px;
}

.W-tim-ul .W-li-top-diyi {
	margin-top: 3px;
}

.W-tim-ul .W-margin-top1 span {
	top: 188px;
}

.W-tim-ul .W-margin-top2 {
	margin-top: 25px;
}

.W-tim-ul .W-margin-top2 span {
	top: 313px;
}

.W-work-right {
	width: 670px;
	padding-bottom: 1px;
	overflow: hidden;
	position: absolute;
	left: 150px;
	top: 90px;
}

.W-work-right ul li .W-jie1 {
	font-size: 24px;
    /*color: #3e2417;*/
    color: #fff;
    transition: color .3s ease-in;
}

.W-jie1 strong {
	font-weight: 500;
}

.W-work-right ul li .W-jie2 {
	font-size: 14px;
    /*color: #3e2417;*/
    color: #fff;
}
   
.W-work-right ul li {
	margin-top: 26px;
	padding-left: 30px;
	height: 100px;
} 

.W-work-right ul .W-time-top {
	margin-top: 25px;
}

.W-work-right ul li .W-jie2 span {
	display: block;
	margin:-2px 0 2px 0;
	/*color: #E87E04;*/
	color: #8ca870;
}

.W-work-right ul {
	cursor: pointer;
}




/*我的作品*/
.W-mywork {
}

.swiper-container2 .swiper-slide,
.swiper-container2 .swiper-wrapper {
	width:100%!important;
	margin-top: 8px;
}

.swiper-container2 {
	moz-user-select: -moz-none;
	-moz-user-select: none;
	-o-user-select:none;
	-khtml-user-select:none;
	-webkit-user-select:none;
	-ms-user-select:none;
	user-select:none;
	width: 730px;
	height: 300px;
	margin: 0 auto;
	padding-bottom: 90px;
	top: 50%;
	margin-top: -160px;
}

.W-mywork-left,.W-mywork-right {
	float: left;
	width:300px;
	height: 100%;
	position: relative;
}

.W-mywork-left a,.W-mywork-right a{
	position: absolute;
	display: block;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	border-radius: 50%;
	/*overflow: hidden;*/
	border: 1px solid #ccc;
}

.W-mywork-left {
	margin: 0px 0 0 39px;
}

.W-mywork-right {
	margin: 0px 0 0 40px;
}

.swiper-container2 .swiper-pagination-bullet {
	background: #ccc;
	border-radius: 0;
	width: 25px;
	height: 25px;
	text-align: center;
	line-height: 25px;
	font-size: 16px;
	color: white;
	font-family: "微软雅黑";
	opacity: 1;
}

.swiper-container2 .swiper-pagination-bullet-active {
	background: #a2c044;
}

.W-mywork .swiper-container2 .swiper-pagination2 {
	bottom: 20px;
	moz-user-select: -moz-none;
	-moz-user-select: none;
	-o-user-select:none;
	-khtml-user-select:none;
	-webkit-user-select:none;
	-ms-user-select:none;
	user-select:none;
}

.W-work1 span,
.W-work2 span,
.W-work3 span,
.W-work4 span,
.W-work5 span,
.W-work6 span,
.W-work7 span,
.W-work8 span,
.W-work9 span,
.W-work10 span,
.W-work11 span,
.W-work12 span, 
.W-work13 span,
.W-work14 span {
	opacity: .4;
	transition:opacity .5s ease-in;
	-weblit-transition:opacity .5s ease-in;
	-o-transition:opacity .5s ease-in;
	-moz-transition:opacity .5s ease-in;
	-ms-transition:opacity .5s ease-in;
}

.W-mywork-left a:hover div{
	-ms-filter:grayscale(0);
	-moz-filter:grayscale(0);
	-o-filter:grayscale(0);
	filter:grayscale(0);
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
	-moz-transform: scale(1.1);
}

.W-mywork-right a:hover div{
	-ms-filter:grayscale(0);
	-moz-filter:grayscale(0);
	-o-filter:grayscale(0);
	filter:grayscale(0);
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
	-moz-transform: scale(1.1);
}

.W-mywork-left a:hover div span {
	opacity: 1;
}

.W-mywork-right a:hover div span {
	opacity: 1;
}

.W-work1 {
	background: url(../img/work1.jpg) no-repeat;
}

.W-work2 {
	background: url(../img/work2.jpg) no-repeat;
}

.W-work3 {
	background: url(../img/work3.jpg) no-repeat;
}

.W-work4 {
	background: url(../img/work4.jpg) no-repeat;
}

.W-work5 {
	background: url(../img/work5.jpg) no-repeat;
}

.W-work6 {
	background: url(../img/work6.jpg) no-repeat;
}

.W-work7 {
	background: url(../img/work7.jpg) no-repeat;
}

.W-work8 {
	background: url(../img/work8.jpg) no-repeat;
}

.W-work9 {
	background: url(../img/work9.jpg) no-repeat;
}

.W-work10 {
	background: url(../img/work10.jpg) no-repeat;
}

.W-work11 {
	background: url(../img/work11.jpg) no-repeat;
}

.W-work12 {
	background: url(../img/work12.jpg) no-repeat;
}

.W-work13 {
	background: url(../img/gerenwangzhan.png) no-repeat;
}

.W-work14 {
	background: url(../img/blog.png) no-repeat;
}

.W-work1,.W-work2,.W-work3,.W-work4,
.W-work5,.W-work6,.W-work7,.W-work8,
.W-work9,.W-work10,.W-work11,
.W-work12,.W-work13,.W-work14 {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center center;
	border-radius: 50%;
	overflow: hidden;
	font-size: 50px;
	color: #fff;
	text-align: center;
    font-size: 24px;
    text-shadow: 0 0 6px #000; 
    line-height: 300px;
    font-weight: bold;
    transition: filter 0.5s ease-in;
    -o-transition: filter 0.5s ease-in;
    -webkit-transition: filter 0.5s ease-in;
    -moz-transition: filter 0.5s ease-in;
    -ms-transition: filter 0.5s ease-in;
    filter:grayscale(1);
    -moz-filter:grayscale(1);
    -ms-filter:grayscale(1);
    transition: transform 0.8s ease-out;
    -o-transition: transform 0.8s ease-out;
    -webkit-transition: transform 0.8s ease-out;
    -moz-transition: transform 0.8s ease-out;
    -ms-transition: transform 0.8s ease-out;
}

/*联系我*/

.W-lian {
	width: 500px;
	height: 460px;
	left:50%;
	top:50%;
	position: absolute;
	margin: -200px 0 0 -250px;
}

.W-lian-right {
	float: right;
	border-top: 6px solid #ffd200;
	border-right: 6px solid #ffd200;
	width: 150px;
	height: 100px;
}

.W-lian-bot {
	width: 488px;
	height: 30px;
	border-bottom: 6px solid #ffd200;
	border-right: 6px solid #ffd200;
	border-left: 6px solid #ffd200;
	position: absolute;
	bottom: 0;
}

.W-lian-zhong {
	position: absolute;
	width: 400px;
	height: 400px;
	left: 50px;
	top: 30px;
}

.W-lian-p1,.W-lian-p2 {
	color: #ffd200;
	font-size: 40px;
	font-family: "微软雅黑";
	font-weight: 800;
	width: 204px;
	line-height: 70px;
	float: left;
}

.W-lian-p2 {
	color: #fff;
	width: 160px;
	margin-left: 0;
}

.W-lian-heng {
	width: 364px;
	margin-left: 18px;
	height: 70px;
	border-bottom: 1px solid #ffd200;
	overflow: hidden;
}

.W-lian-nr {
	width: 364px;
	height: auto;
	margin: 0 auto;
	text-align: center;
}
.W-lian-p3 em {
	font-size: 24px;
	font-family: "微软雅黑";
	font-style: normal;
	padding: 0 15px;
}

.W-lian-p3 {
	margin-top: 10px;
	height: 50px;
	line-height: 50px;	
}

.W-lian-e1 {
	color: #e3723c;
}

.W-lian-e2 {
	color: #84c800;
}

.W-lian-e3 {
	color: #33ccff;
}

.W-lian-e4 {
	color: #9e966e;
}

.W-lian-p4 {
	margin-top: 14px;
	font-size: 18px;
	color: #fff;
	/*color: #64572a;*/
	font-family: "微软雅黑";
	line-height: 35px;
}

.W-lian-bottom {
	width:274px;
	margin: 0 auto;
	height:auto;
	margin-top: 24px;
}

.W-lian-bottom a {
	width:34px;
	height:34px;
	float: left;
	background: #404040;
	text-align: center;
	line-height: 34px;
	border-radius: 50%;
	cursor: pointer;
	margin-left: 10px;
	position: relative;
}


.W-lian-bottom span {
	display: none;
	width: 60px;
	height: 30px;
	background: #337ab7;
	position: absolute;
	top: -42px;
	   -moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	        border-radius: 5px;
	text-align: center;
	line-height: 30px;
	color: #fff;
	font-size: 12px;
}

.W-lian-bottom span:before {
	content: "";
	position: absolute;
	right: 22px;
	top: 30px;
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-top: 8px solid #337ab7;
	border-right: 8px solid transparent;
}

.W-lian-bottom .W-Github ,.W-lian-bottom .W-weibo,.W-lian-bottom .W-zhihu{
	left: -13px;
}

.W-lian-bottom .W-Mail {
	width: 138px;
	left: -49px;
}

.W-lian-bottom .W-Mail:before {
	right: 65px;
}

.W-lian-bottom .W-qq,.W-lian-bottom .W-weixin {
	width: 138px;
	height: 150px;
	left: -57px;
	top: -165px;
	border: 2px solid #337ab7;
}

.W-lian-bottom .W-qq {
	background: url(../img/myqq.png) no-repeat transparent;
	background-size: cover;
}

.W-lian-bottom .W-qq:before,.W-lian-bottom .W-weixin:before  {
	top: 152px;
	left: 63px;
}

.W-lian-bottom .W-weixin {
	background: url(../img/myweixin.png) no-repeat transparent;
	background-size: cover;
}

.W-lian-bottom .W-Mail {
	width: 138px;
	left: -49px;
}

.W-lian-bottom .W-Mail:before {
	right: 65px;
}


.W-lian-bottom a:hover {
	background: #337ab7;
}

.W-lian-bottom a img {
	width:18px;
	height:18px;
}

/*评论*/

.W-pinglun {
	overflow: auto;
	width: 100%;
	height: 100%;
	position:fixed;
	background: #fff;
	padding-bottom: 0;
	left: 0;
	top: 0;
	z-index: 10000;
	display: none;
	background: rgba(255,255,255,.45);
}

#SOHUCS {
	width: 94%!important;
	left: 0;
	top: 0;
	display: block;
	margin: 0 auto;
	margin-top: 50px!important;
}

.swiper-slide-blur {
	-webkit-filter: blur(10px); 
       -moz-filter: blur(10px);
        -ms-filter: blur(10px);    
            filter: blur(10px); 
}

.bg-3 {
	display: block;
    background: #37474f;
    color: #fff;
    position: fixed;
    z-index: 200;
    left: 2.5%;
    bottom: 4%;
    animation: left_ping 1s linear 1.8s 1; 
    -o-animation: left_ping 1s linear 1.8s 1; 
    -webkit-animation: left_ping 1s linear 1.8s 1; 
    -moz-animation: left_ping 1s linear 1.8s 1; 
    -ms-animation: left_ping 1s linear 1.8s 1; 
    background: transparent;
}

.bg-2 {
	position: absolute;
	right: 2%;
	top: 20px;
	background: transparent;
	display: block;
}

.W-ggb {
	min-width: 60px;
	padding: 0;
	line-height: 34px;
	height: 34px;
	max-width: 100px;
	font-size: 14px;
}
.button--aylen::after {
	background: #337ab7;
}

.button--nanuk:hover {
    background-color: #337ab7;
}

.button {
	margin: 0;
}

.pingl {
	animation: XiaLa .8s ease-out;
	-o-animation: XiaLa .8s ease-out;
	-webkit-animation: XiaLa .8s ease-out;
	-moz-animation: XiaLa .8s ease-out;
	-ms-animation: XiaLa .8s ease-out;
}


.PingGuan {
	animation: PingGuan .6s ease-out;
	-o-animation: PingGuan .6s ease-out;
	-webkit-animation: PingGuan .6s ease-out;
	-moz-animation: PingGuan .6s ease-out;
	-ms-animation: PingGuan .6s ease-out;
}

.W-yi-bg {
	display: none;
}

.W-s-yyue {
	display: none;
}

.Ws-bei {
	width: 100%;
	text-align: center;
}

.fadeInUp1 {
	animation: fadeInUp 1s linear .3s;-o-animation: fadeInUp 1s linear .3s;
	-webkit-animation: fadeInUp 1s linear .3s;
	-moz-animation: fadeInUp 1s linear .3s;
	-ms-animation: fadeInUp 1s linear .3s;
}

.fadeInUp2 {
	animation: fadeInUp 1s linear .7s;-o-animation: fadeInUp 1s linear .7s;
	-webkit-animation: fadeInUp 1s linear .7s;
	-moz-animation: fadeInUp 1s linear .7s;
	-ms-animation: fadeInUp 1s linear .7s;
}

.fadeInUp3 {
	animation: fadeInUp 1s linear 1.1s;
	-o-animation: fadeInUp 1s linear 1.1s;
	-moz-animation: fadeInUp 1s linear 1.1s;
	-webkit-animation: fadeInUp 1s linear 1.1s;
	-ms-animation: fadeInUp 1s linear 1.1s;
}

.fadeInUp4 {
	animation: fadeInUp 1s linear 1.4s;
	-o-animation: fadeInUp 1s linear 1.4s;
	-webkit-animation: fadeInUp 1s linear 1.4s;
	-moz-animation: fadeInUp 1s linear 1.4s;
	-ms-animation: fadeInUp 1s linear 1.4s;
}

.fadeInUp5 {
	animation: fadeInUp 1s linear 1.7s;-o-animation: fadeInUp 1s linear 1.7s;
	-webkit-animation: fadeInUp 1s linear 1.7s;
	-moz-animation: fadeInUp 1s linear 1.7s;
	-ms-animation: fadeInUp 1s linear 1.7s;
}


.rubberBand {
  animation: rubberBand 1.2s linear 1s;
}





/*动画*/
/*评论区域*/

 @keyframes left_ping {
  from, 20%, 53%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -o-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	-moz-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	-ms-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
  }

  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -o-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -moz-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -ms-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -30px, 0);
    -o-transform: translate3d(0, -30px, 0);
    -moz-transform: translate3d(0, -30px, 0);
    -ms-transform: translate3d(0, -30px, 0);
    -webkit-transform: translate3d(0, -30px, 0);
  }

  70% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -o-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -moz-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -ms-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -15px, 0);
    -o-transform: translate3d(0, -15px, 0);
    -webkit-transform: translate3d(0, -15px, 0);
    -moz-transform: translate3d(0, -15px, 0);
    -ms-transform: translate3d(0, -15px, 0);
  }

  90% {
    transform: translate3d(0,-4px,0);
    -o-transform: translate3d(0,-4px,0);
    -moz-transform: translate3d(0,-4px,0);
    -ms-transform: translate3d(0,-4px,0);
    -webkit-transform: translate3d(0,-4px,0);
  }
}

@-webkit-keyframes left_ping {
  from, 20%, 53%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -o-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	-moz-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	-ms-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
  }

  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -o-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -moz-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -ms-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -30px, 0);
    -o-transform: translate3d(0, -30px, 0);
    -moz-transform: translate3d(0, -30px, 0);
    -ms-transform: translate3d(0, -30px, 0);
    -webkit-transform: translate3d(0, -30px, 0);
  }

  70% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -o-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -moz-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -ms-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -15px, 0);
    -o-transform: translate3d(0, -15px, 0);
    -webkit-transform: translate3d(0, -15px, 0);
    -moz-transform: translate3d(0, -15px, 0);
    -ms-transform: translate3d(0, -15px, 0);
  }

  90% {
    transform: translate3d(0,-4px,0);
    -o-transform: translate3d(0,-4px,0);
    -moz-transform: translate3d(0,-4px,0);
    -ms-transform: translate3d(0,-4px,0);
    -webkit-transform: translate3d(0,-4px,0);
  }
}

@-o-keyframes left_ping {
  from, 20%, 53%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -o-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	-moz-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	-ms-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
  }

  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -o-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -moz-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -ms-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -30px, 0);
    -o-transform: translate3d(0, -30px, 0);
    -moz-transform: translate3d(0, -30px, 0);
    -ms-transform: translate3d(0, -30px, 0);
    -webkit-transform: translate3d(0, -30px, 0);
  }

  70% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -o-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -moz-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -ms-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -15px, 0);
    -o-transform: translate3d(0, -15px, 0);
    -webkit-transform: translate3d(0, -15px, 0);
    -moz-transform: translate3d(0, -15px, 0);
    -ms-transform: translate3d(0, -15px, 0);
  }

  90% {
    transform: translate3d(0,-4px,0);
    -o-transform: translate3d(0,-4px,0);
    -moz-transform: translate3d(0,-4px,0);
    -ms-transform: translate3d(0,-4px,0);
    -webkit-transform: translate3d(0,-4px,0);
  }
}

@-moz-keyframes left_ping {
  from, 20%, 53%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -o-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	-moz-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	-ms-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
  }

  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -o-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -moz-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -ms-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -30px, 0);
    -o-transform: translate3d(0, -30px, 0);
    -moz-transform: translate3d(0, -30px, 0);
    -ms-transform: translate3d(0, -30px, 0);
    -webkit-transform: translate3d(0, -30px, 0);
  }

  70% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -o-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -moz-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -ms-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -15px, 0);
    -o-transform: translate3d(0, -15px, 0);
    -webkit-transform: translate3d(0, -15px, 0);
    -moz-transform: translate3d(0, -15px, 0);
    -ms-transform: translate3d(0, -15px, 0);
  }

  90% {
    transform: translate3d(0,-4px,0);
    -o-transform: translate3d(0,-4px,0);
    -moz-transform: translate3d(0,-4px,0);
    -ms-transform: translate3d(0,-4px,0);
    -webkit-transform: translate3d(0,-4px,0);
  }
}

@-ms-keyframes left_ping {
  from, 20%, 53%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -o-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	-moz-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	-ms-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
  }

  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -o-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -moz-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -ms-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -30px, 0);
    -o-transform: translate3d(0, -30px, 0);
    -moz-transform: translate3d(0, -30px, 0);
    -ms-transform: translate3d(0, -30px, 0);
    -webkit-transform: translate3d(0, -30px, 0);
  }

  70% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -o-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -moz-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -ms-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -15px, 0);
    -o-transform: translate3d(0, -15px, 0);
    -webkit-transform: translate3d(0, -15px, 0);
    -moz-transform: translate3d(0, -15px, 0);
    -ms-transform: translate3d(0, -15px, 0);
  }

  90% {
    transform: translate3d(0,-4px,0);
    -o-transform: translate3d(0,-4px,0);
    -moz-transform: translate3d(0,-4px,0);
    -ms-transform: translate3d(0,-4px,0);
    -webkit-transform: translate3d(0,-4px,0);
  }
}




@keyframes PingGuan {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
    -o-transform: translate3d(0, 100%, 0);
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
  }
}

@-webkit-keyframes PingGuan {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
    -o-transform: translate3d(0, 100%, 0);
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
  }
}

@-o-keyframes PingGuan {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
    -o-transform: translate3d(0, 100%, 0);
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
  }
}

@-moz-keyframes PingGuan {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
    -o-transform: translate3d(0, 100%, 0);
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
  }
}

@-ms-keyframes PingGuan {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
    -o-transform: translate3d(0, 100%, 0);
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
  }
}

@keyframes XiaLa {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
    -o-transform: translate3d(0, -100%, 0);
    -webkit-transform: translate3d(0, -100%, 0);
    -moz-transform: translate3d(0, -100%, 0);
    -ms-transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    transform: none;
    -o-transform: none;
    -moz-transform: none;
    -webkit-transform: none;
    -ms-transform: none;
  }
}

@-webkit-keyframes XiaLa {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
    -o-transform: translate3d(0, -100%, 0);
    -webkit-transform: translate3d(0, -100%, 0);
    -moz-transform: translate3d(0, -100%, 0);
    -ms-transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    transform: none;
    -o-transform: none;
    -moz-transform: none;
    -webkit-transform: none;
    -ms-transform: none;
  }
}

@-o-keyframes XiaLa {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
    -o-transform: translate3d(0, -100%, 0);
    -webkit-transform: translate3d(0, -100%, 0);
    -moz-transform: translate3d(0, -100%, 0);
    -ms-transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    transform: none;
    -o-transform: none;
    -moz-transform: none;
    -webkit-transform: none;
    -ms-transform: none;
  }
}

@-moz-keyframes XiaLa {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
    -o-transform: translate3d(0, -100%, 0);
    -webkit-transform: translate3d(0, -100%, 0);
    -moz-transform: translate3d(0, -100%, 0);
    -ms-transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    transform: none;
    -o-transform: none;
    -moz-transform: none;
    -webkit-transform: none;
    -ms-transform: none;
  }
}

@-ms-keyframes XiaLa {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
    -o-transform: translate3d(0, -100%, 0);
    -webkit-transform: translate3d(0, -100%, 0);
    -moz-transform: translate3d(0, -100%, 0);
    -ms-transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    transform: none;
    -o-transform: none;
    -moz-transform: none;
    -webkit-transform: none;
    -ms-transform: none;
  }
}

/*评论区域end*/


@keyframes runs
	{
		0%{-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);
		-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);}
		100%{-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);
		-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);}
	}
@-webkit-keyframes runs
{
	0%{-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);
	-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);}
	100%{-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);
	-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);}
}
@-o-keyframes runs
{
	0%{-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);
	-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);}
	100%{-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);
	-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);}
}
@-moz-keyframes runs
{
	0%{-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);
	-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);}
	100%{-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);
	-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);}
}
@-ms-keyframes runs
{
	0%{-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);
	-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);}
	100%{-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);
	-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);}
}

/*定义动画逆时针*/
@keyframes runn
{
	0%{-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);
	-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);}
	100%{-webkit-transform:rotate(-360deg);-o-transform:rotate(-360deg);
	-moz-transform:rotate(-360deg);-ms-transform:rotate(-360deg);}
}
@-webkit-keyframes runn
{
	0%{-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);
	-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);}
	100%{-webkit-transform:rotate(-360deg);-o-transform:rotate(-360deg);
	-moz-transform:rotate(-360deg);-ms-transform:rotate(-360deg);}
}
@-o-keyframes runn
{
	0%{-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);
	-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);}
	100%{-webkit-transform:rotate(-360deg);-o-transform:rotate(-360deg);
	-moz-transform:rotate(-360deg);-ms-transform:rotate(-360deg);}
}
@-ms-keyframes runn
{
	0%{-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);
	-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);}
	100%{-webkit-transform:rotate(-360deg);-o-transform:rotate(-360deg);
	-moz-transform:rotate(-360deg);-ms-transform:rotate(-360deg);}
}
@-moz-keyframes runn
{
	0%{-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);
	-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);}
	100%{-webkit-transform:rotate(-360deg);-o-transform:rotate(-360deg);
	-moz-transform:rotate(-360deg);-ms-transform:rotate(-360deg);}
}

/*波纹动画*/

@keyframes sploosh3 {
  0% {
            box-shadow: 0 0 0 0px rgba(37, 143, 184, 1);
         -o-box-shadow: 0 0 0 0px rgba(37, 143, 184, 1);
    -webkit-box-shadow: 0 0 0 0px rgba(37, 143, 184, 1);
        -ms-box-shadow: 0 0 0 0px rgba(37, 143, 184, 1);
       -moz-box-shadow: 0 0 0 0px rgba(37, 143, 184, 1);
    background: rgba(255, 255, 255, 0.7);
  }
  100% {
            box-shadow: 0 0 0 10px rgba(37, 143, 184, 0);
         -o-box-shadow: 0 0 0 10px rgba(37, 143, 184, 0);
    -webkit-box-shadow: 0 0 0 10px rgba(37, 143, 184, 0);
       -moz-box-shadow: 0 0 0 10px rgba(37, 143, 184, 0);
        -ms-box-shadow: 0 0 0 10px rgba(37, 143, 184, 0);
    background: rgba(255, 255, 255, 1);
  }
}

@-webkit-keyframes sploosh3 {
  0% {
            box-shadow: 0 0 0 0px rgba(37, 143, 184, 1);
         -o-box-shadow: 0 0 0 0px rgba(37, 143, 184, 1);
    -webkit-box-shadow: 0 0 0 0px rgba(37, 143, 184, 1);
        -ms-box-shadow: 0 0 0 0px rgba(37, 143, 184, 1);
       -moz-box-shadow: 0 0 0 0px rgba(37, 143, 184, 1);
    background: rgba(255, 255, 255, 0.7);
  }
  100% {
            box-shadow: 0 0 0 10px rgba(37, 143, 184, 0);
         -o-box-shadow: 0 0 0 10px rgba(37, 143, 184, 0);
    -webkit-box-shadow: 0 0 0 10px rgba(37, 143, 184, 0);
       -moz-box-shadow: 0 0 0 10px rgba(37, 143, 184, 0);
        -ms-box-shadow: 0 0 0 10px rgba(37, 143, 184, 0);
    background: rgba(255, 255, 255, 1);
  }
}
@-o-keyframes sploosh3 {
  0% {
            box-shadow: 0 0 0 0px rgba(37, 143, 184, 1);
         -o-box-shadow: 0 0 0 0px rgba(37, 143, 184, 1);
    -webkit-box-shadow: 0 0 0 0px rgba(37, 143, 184, 1);
        -ms-box-shadow: 0 0 0 0px rgba(37, 143, 184, 1);
       -moz-box-shadow: 0 0 0 0px rgba(37, 143, 184, 1);
    background: rgba(255, 255, 255, 0.7);
  }
  100% {
            box-shadow: 0 0 0 10px rgba(37, 143, 184, 0);
         -o-box-shadow: 0 0 0 10px rgba(37, 143, 184, 0);
    -webkit-box-shadow: 0 0 0 10px rgba(37, 143, 184, 0);
       -moz-box-shadow: 0 0 0 10px rgba(37, 143, 184, 0);
        -ms-box-shadow: 0 0 0 10px rgba(37, 143, 184, 0);
    background: rgba(255, 255, 255, 1);
  }
}

@-moz-keyframes sploosh3 {
  0% {
            box-shadow: 0 0 0 0px rgba(37, 143, 184, 1);
         -o-box-shadow: 0 0 0 0px rgba(37, 143, 184, 1);
    -webkit-box-shadow: 0 0 0 0px rgba(37, 143, 184, 1);
        -ms-box-shadow: 0 0 0 0px rgba(37, 143, 184, 1);
       -moz-box-shadow: 0 0 0 0px rgba(37, 143, 184, 1);
    background: rgba(255, 255, 255, 0.7);
  }
  100% {
            box-shadow: 0 0 0 10px rgba(37, 143, 184, 0);
         -o-box-shadow: 0 0 0 10px rgba(37, 143, 184, 0);
    -webkit-box-shadow: 0 0 0 10px rgba(37, 143, 184, 0);
       -moz-box-shadow: 0 0 0 10px rgba(37, 143, 184, 0);
        -ms-box-shadow: 0 0 0 10px rgba(37, 143, 184, 0);
    background: rgba(255, 255, 255, 1);
  }
}

@-ms-keyframes sploosh3 {
  0% {
            box-shadow: 0 0 0 0px rgba(37, 143, 184, 1);
         -o-box-shadow: 0 0 0 0px rgba(37, 143, 184, 1);
    -webkit-box-shadow: 0 0 0 0px rgba(37, 143, 184, 1);
        -ms-box-shadow: 0 0 0 0px rgba(37, 143, 184, 1);
       -moz-box-shadow: 0 0 0 0px rgba(37, 143, 184, 1);
    background: rgba(255, 255, 255, 0.7);
  }
  100% {
            box-shadow: 0 0 0 10px rgba(37, 143, 184, 0);
         -o-box-shadow: 0 0 0 10px rgba(37, 143, 184, 0);
    -webkit-box-shadow: 0 0 0 10px rgba(37, 143, 184, 0);
       -moz-box-shadow: 0 0 0 10px rgba(37, 143, 184, 0);
        -ms-box-shadow: 0 0 0 10px rgba(37, 143, 184, 0);
    background: rgba(255, 255, 255, 1);
  }
}

/*字体导航按钮放大动画*/
@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
    -o-transform: scale3d(1, 1, 1);
    -webkit-transform: scale3d(1, 1, 1);
    -moz-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
  }

  50% {
    transform: scale3d(1.05, 1.05, 1.05);
    -o-transform: scale3d(1.05, 1.05, 1.05);
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    -ms-transform: scale3d(1.05, 1.05, 1.05);
    -moz-transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    transform: scale3d(1, 1, 1);
    -o-transform: scale3d(1, 1, 1);
    -moz-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    -webkit-transform: scale3d(1, 1, 1);
  }
}

@-webkit-keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
    -o-transform: scale3d(1, 1, 1);
    -webkit-transform: scale3d(1, 1, 1);
    -moz-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
  }

  50% {
    transform: scale3d(1.05, 1.05, 1.05);
    -o-transform: scale3d(1.05, 1.05, 1.05);
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    -ms-transform: scale3d(1.05, 1.05, 1.05);
    -moz-transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    transform: scale3d(1, 1, 1);
    -o-transform: scale3d(1, 1, 1);
    -moz-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    -webkit-transform: scale3d(1, 1, 1);
  }
}

@-o-keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
    -o-transform: scale3d(1, 1, 1);
    -webkit-transform: scale3d(1, 1, 1);
    -moz-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
  }

  50% {
    transform: scale3d(1.05, 1.05, 1.05);
    -o-transform: scale3d(1.05, 1.05, 1.05);
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    -ms-transform: scale3d(1.05, 1.05, 1.05);
    -moz-transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    transform: scale3d(1, 1, 1);
    -o-transform: scale3d(1, 1, 1);
    -moz-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    -webkit-transform: scale3d(1, 1, 1);
  }
}

@-moz-keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
    -o-transform: scale3d(1, 1, 1);
    -webkit-transform: scale3d(1, 1, 1);
    -moz-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
  }

  50% {
    transform: scale3d(1.05, 1.05, 1.05);
    -o-transform: scale3d(1.05, 1.05, 1.05);
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    -ms-transform: scale3d(1.05, 1.05, 1.05);
    -moz-transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    transform: scale3d(1, 1, 1);
    -o-transform: scale3d(1, 1, 1);
    -moz-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    -webkit-transform: scale3d(1, 1, 1);
  }
}

@-ms-keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
    -o-transform: scale3d(1, 1, 1);
    -webkit-transform: scale3d(1, 1, 1);
    -moz-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
  }

  50% {
    transform: scale3d(1.05, 1.05, 1.05);
    -o-transform: scale3d(1.05, 1.05, 1.05);
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    -ms-transform: scale3d(1.05, 1.05, 1.05);
    -moz-transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    transform: scale3d(1, 1, 1);
    -o-transform: scale3d(1, 1, 1);
    -moz-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    -webkit-transform: scale3d(1, 1, 1);
  }
}


/*渐显*/
@-webkit-keyframes fadeInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-20px);
		transform: translateX(-20px);
		-o-transform: translateX(-20px);
		-moz-transform: translateX(-20px);
		-ms-transform: translateX(-20px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0);
		-o-transform: translateX(0);
		-moz-transform: translateX(0);
		-ms-transform: translateX(0);
	}
}

@keyframes fadeInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-20px);
		transform: translateX(-20px);
		-o-transform: translateX(-20px);
		-moz-transform: translateX(-20px);
		-ms-transform: translateX(-20px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0);
		-o-transform: translateX(0);
		-moz-transform: translateX(0);
		-ms-transform: translateX(0);
	}
}

@-moz-keyframes fadeInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-20px);
		transform: translateX(-20px);
		-o-transform: translateX(-20px);
		-moz-transform: translateX(-20px);
		-ms-transform: translateX(-20px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0);
		-o-transform: translateX(0);
		-moz-transform: translateX(0);
		-ms-transform: translateX(0);
	}
}
@-o-keyframes fadeInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-20px);
		transform: translateX(-20px);
		-o-transform: translateX(-20px);
		-moz-transform: translateX(-20px);
		-ms-transform: translateX(-20px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0);
		-o-transform: translateX(0);
		-moz-transform: translateX(0);
		-ms-transform: translateX(0);
	}
}

@-ms-keyframes fadeInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-20px);
		transform: translateX(-20px);
		-o-transform: translateX(-20px);
		-moz-transform: translateX(-20px);
		-ms-transform: translateX(-20px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0);
		-o-transform: translateX(0);
		-moz-transform: translateX(0);
		-ms-transform: translateX(0);
	}
}


@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
    -o-transform: translate3d(0, 100%, 0);
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    transform: none;-o-transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
  }
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
    -o-transform: translate3d(0, 100%, 0);
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    transform: none;-o-transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
  }
}

@-o-keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
    -o-transform: translate3d(0, 100%, 0);
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    transform: none;-o-transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
  }
}

@-moz-keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
    -o-transform: translate3d(0, 100%, 0);
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    transform: none;-o-transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
  }
}

@-ms-keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
    -o-transform: translate3d(0, 100%, 0);
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    transform: none;-o-transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
  }
}

@-webkit-keyframes rubberBand {
  from {
    transform: scale3d(1, 1, 1);
  }

  30% {
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    transform: scale3d(.95, 1.05, 1);
  }

  75% {
    transform: scale3d(1.05, .95, 1);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}

@-o-keyframes rubberBand {
  from {
    transform: scale3d(1, 1, 1);
  }

  30% {
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    transform: scale3d(.95, 1.05, 1);
  }

  75% {
    transform: scale3d(1.05, .95, 1);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}

@-moz-keyframes rubberBand {
  from {
    transform: scale3d(1, 1, 1);
  }

  30% {
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    transform: scale3d(.95, 1.05, 1);
  }

  75% {
    transform: scale3d(1.05, .95, 1);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}

@-ms-keyframes rubberBand {
  from {
    transform: scale3d(1, 1, 1);
  }

  30% {
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    transform: scale3d(.95, 1.05, 1);
  }

  75% {
    transform: scale3d(1.05, .95, 1);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}






